<!DOCTYPE html>
<html>
<head>
	<title>Vue处理边界的情况-访问子组件实例或子元素</title>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

  <div id="app">
    <button @click="start">点击</button>
    <com-pirate ref="pirate" v-bind:msgtest="msgdata"/>
  </div>

</body>

</html>

<script>

Vue.component('com-pirate',{
	props:['msgtest'],
	data: function () {
	    return {
	      count: 0
	    }
  	},
	methods:{
		hello() {

			//会弹出警告
			// this.msgtest="----------";
			this.count++;
      		console.log("子组件方法");
    	}
	},
	template:'<h3>{{count}}{{msgtest}}</h3>'
});

new Vue({
  el: "#app",
  data:{
  	msgdata:"加勒比海盗"
  },
  methods:{
    start(){
    	//调用子组件的方法
      this.$refs.pirate.hello();
    }
  },
});
</script>

<style>
</style>